<template>
    <div>
        <el-upload
            :headers="header"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload"
            :class="{disabled:uploadDisabled}"
            :on-preview="handlePictureCardPreview"
            :on-progress="handleProgress"
            :data="{code:this.hotelUuCode}"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :action="serviceUrl"
            :with-credentials="true"
            list-type="picture-card"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="imageUrl" alt/>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getToken
    } from '@/utils/auth'
    import {Message} from 'element-ui'

    export default {
        name: 'ImageUpload',
        props: {
            uploadUrl: {
                type: String,
                default: ''
            },
            hotelUuCode: {
                type: String,
                default: ''
            },
            serviceFileList: {
                type: Array,
                default: []
            },
            removeUrl: {
                type: String,
                default: ''
            }
        },
        data () {
            return {
                serviceUrl: this.uploadUrl,
                fileList: this.serviceFileList,
                imageUrl: '',
                uploadDisabled: false,
                filename: '',
                dialogVisible: false,
                header: {'X-Token': getToken(), fileType: 2}
            }
        },
        watch: {
            filename: function () {
                this.$emit('upimgurl', this.filename)
            },
            fileList: function () {
                if (this.fileList && this.fileList.length > 0) {
                    this.filename = this.fileList[0]['url'];
                    this.uploadDisabled = true
                }
            }
        },
        methods: {
            handleRemove (file, fileList) {
                if (file && file.status === 'success') {
                    this.uploadDisabled = false
                    this.filename = ''
                }
            },
            handlePictureCardPreview (file) {
                this.imageUrl = file.url
                this.dialogVisible = true
            },
            beforeAvatarUpload (file) {
                console.log(file.type)
                const isImage = new Set([
                    'image/png',
                    'image/gif',
                    'image/jpg',
                    'image/jpeg'
                ]).has(file.type)
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isImage) {
                    this.$message.error('图片格式仅支持gif、png、jpg格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isImage && isLt2M
            },
            handleAvatarSuccess: function (res, file, fileList) {
                if (res.code === 0) {
                    this.uploadDisabled = true
                    this.filename = res.url
                    this.$notify({
                        title: '成功',
                        message: '上传成功',
                        type: 'success',
                        duration: 2000
                    })
                } else {
                    fileList.pop()
                    this.uploadDisabled = false
                    Message({
                        message: res.msg,
                        type: 'error',
                        duration: 5 * 1000
                    })
                }

            },
            handleAvatarError (err, file, fileList) {
                fileList.pop()
                this.uploadDisabled = false
            },
            handleProgress (event, file, fileList) {
                this.uploadDisabled = true
            }
        },
        created: function () {
            if (this.fileList.length > 0) {
                if (this.fileList[0]['url'] != '' && this.fileList[0]['url'] != null) {
                    this.uploadDisabled = true
                    this.filename = this.fileList[0]['url'];
                } else {
                    this.fileList = []
                }
            }
        }
    }
</script>

<style scoped>
    .disabled >>> .el-upload--picture-card {
        display: none;
    }
</style>
